import React from 'react';

import { Counter } from './Counter-事件处理函数额外传参';
import { Comments } from './Comments';

export class RefDOM extends React.Component {
  // 1 创建原生dom的容器
  inputRef = React.createRef();
  counterRef = React.createRef();

  // 事件处理函数
  handleSubmit = () => {
    console.log(this.inputRef.current.value);
    console.log(this.counterRef.current);
    console.log(this.counterRef.current.state.count);
    console.log(this.counterRef.current.handleCount());
    // 请求服务器 。。。。
  };

  render() {
    return (
      <div>
        {/* 2 关联React自定义组件，通过ref属性 */}
        <Counter ref={this.counterRef} />
        <Comments />
        {/* 2 关联原生的DOM，通过ref属性 */}
        <input type={'text'} ref={this.inputRef}></input>
        <button onClick={this.handleSubmit}>提交</button>
      </div>
    );
  }
}
